本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」

書中不只重構了程式架構、改善了介面設計，還新增了 2 個新遊戲呦！ˋ( ° ▽、° )

新遊戲分別使用了陀螺儀與震動回饋，趕快買書來研究研究吧！ლ(╹∀╹ლ)

在此感謝深智數位的協助，歡迎大家前往購書，鱈魚感謝大家 (｡･∀･)。

助教：「所以到底差在哪啊？沒圖沒真相，被你坑了都不知道。(´。＿。｀)」

鱈魚：「你對我是不是有甚麼很深的偏見啊 (っ °Д °;)っ，來人啊，上連結！」

遊戲狂歡後，我們現在回到大廳了。

最後的最後讓我們完成大廳的「結束派對」按鈕吧。

在 use-client-game-console 新增結束派對的功能。

src\composables\use-client-game-console.ts

...
import { RouteName } from '../router/router';
...
import { useRouter } from 'vue-router';

export function useClientGameConsole() {
  ...

  function endParty() {
    client?.value?.disconnect();
    router.push({
      name: RouteName.HOME
    });
  }
  return {
    ...
    endParty,
  }
}

現在回到大廳組件，實現結束派對功能。

src\views\game-console-lobby.vue

<template>
  ...
  <div class="absolute inset-0 flex">
    <div class="flex w-full h-full">
      <!-- 選單 -->
      <div class="w-1/3 flex flex-col p-12">
        <div class="flex flex-col flex-1 justify-center items-center gap-14">
          ...
          <btn-base
            :ref="mountElement"
            label="結束派對"
            ...
            @click="endParty"
          >
            ...
          </btn-base>
        </div>
        ...
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
...
async function startParty() {...}

function endParty() {
  gameConsole.setStatus('home');
  gameConsole.endParty();
}
...
</script>
...

現在選擇「結束派對」，不只遊戲機網頁會回到首頁，所有的玩家的搖桿頁面也會自動跳回至首頁了。

感謝所有讀者一同參與的 30 天派對之旅，其實派對還沒結束，只要保持赤子之心，繼續更新遊戲，我們就能一直嗨下去。✧*｡٩(ˊᗜˋ*)و✧*｡

在這次專案中，盡可能保持簡單，所以省略了許多功能，若大家有興趣可以加入更多細節，例如：

• 玩家網頁意外斷線後，重啟網頁，會詢問玩家是否重新加入先前遊戲室
• 玩家可自訂名稱與頭像
• 新增遊戲排名，每個玩家可以依據排名得分
• 新增玩家個人資料系統，玩家可以查看玩過甚麼遊戲、累積得分、累積遊玩時間與成就獎章等等資訊

等等更多可能性！ヽ(●`∀´●)ﾉ

那就有緣的話，讓我們明年鐵人賽再見囉！(´,,•ω•,,)

總結

• 完成結束派對功能
• 探討更多可能

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D29